<template>
  <div class="city">
    <router-link :to="{name: 'City'}">
      <span class="city-name">{{ cityName }}</span>
      <span class="iconfont icon-header-arrow"></span>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CitySelector',
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['cityName'])
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/mixins.scss';
@import '@/assets/style/variables.scss';

.city {
  width: .6rem;
  height: $headerHeight;
  a {
    @include flex-row;
    @include vh-center;
    width: 100%;
    height: $headerHeight;
    .city-name {
      font-size: .16rem;
      font-weight: bold;
    }
    .iconfont {
      font-size: .08rem;
      margin-left: .03rem;
    }
  }
}
</style>